<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view>
		<!-- 		<view class="bigBG" :style="{ position: 'fixed', width: windowWidth + 'px', height: windowHeight + 'px' }"></view>
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				color="#ffffff"
				:border="false"
				background-color="#0184fe"
				left-icon="arrowleft"
				title="工单列表"
				@clickLeft="goback"
			></uni-nav-bar>
			<myTabbar :modelData="tabList" :initIndex="tabIndex" @change="changeTab" />
			<view class="dropdownBox" v-if="tarNums === 0 || tarNums === 1">
				<dropdown
					bgColor="#f4f4f4"
					:bgIndex="selectIndex"
					:selectWidth="750"
					fontColor="#414244"
					fontBgColor="#058CFF"
					:selectFontSize="12"
					:list="array"
					@select="selectBusiness"
				></dropdown>
			</view>
			<view class="dropdownBox2" v-else-if="tarNums === 2">
				<input class="searchBox" :value="searchCneter" confirm-type="search" @input="searchInput" @confirm="sbmitSearch" placeholder="设备名称/设备IP" />
				<uni-icons class="searchIcon" color="#9e9fa0" type="search" size="20" />
				<uni-icons class="searchClearIcon" @tap="closeSearch" color="#9e9fa0" type="closeempty" size="20" />
			</view>
		</view>
		<view class="container" :style="{ marginTop: topBar, height: boxHeight }">
			<workOne v-if="tarNums === 0" :content="contentOne" @change="clickOne" />
			<workTwo v-else-if="tarNums === 1" :content="contentTwo" @change="clickTwo" />
			<workThree v-else-if="tarNums === 2" :content="contentThree" @change="clickThree" />
			<view class="bottomShow" v-show="downShow">已经到底啦！</view>
		</view> -->
	</view>
</template>

<script>
// import myTabbar from '@/components/stzhang-tab/stzhang-tab.vue';
// import dropdown from '@/components/drop-down/drop-down.vue';
// // import distance from '@/utils/distance.js'; // 计算距离
// import { coordinate } from '@/utils/distance.js'; // 获取定位
// import workOne from './workOrder/workOne.vue'; // 指派
// import workTwo from './workOrder/workTwo.vue'; // 待处理
// import workThree from './workOrder/workThree.vue'; // 复核
import baseFont from '@/utils/baseFont.js';

export default {
	extends: baseFont,
	data() {
		return {
			// topBarHeight: 0, // 导航栏高度
			// windowWidth: 0, // 手机宽
			// windowHeight: 0, // 手机高
			// tarNums: 0, // 选中工单
			// tabIndex: 0, // 选中工单状态背景色位置
			// currentPage: 1, // 页码
			// pageSize: 5, // 条数
			// total: 0, // 数据总数
			// gdType: 1, // 工单状态
			// searchCneter: '', // 搜索内容
			// downShow: false, // 到底隐藏显示
			// tabList: [
			// 	{
			// 		label: '已受理',
			// 		num: 0
			// 	},
			// 	{
			// 		label: '审核中',
			// 		num: 0
			// 	},
			// 	{
			// 		label: '已完成',
			// 		num: 0
			// 	}
			// ],
			// contentOne: [],
			// contentTwo: [],
			// contentThree: [],
			// array: [
			// 	{
			// 		name: '综合排序',
			// 		value: 0
			// 	},
			// 	{
			// 		name: '距离最近',
			// 		value: 1
			// 	},
			// 	{
			// 		name: '时间最久',
			// 		value: 2
			// 	}
			// ],
			// selectIndex: 0,
			// paixuSort: 'DESC', // 排列顺序
			// paixuOrder: 'ID', // 排列条件
			// gdztType: '' // 工单状态
		};
	},
	computed: {
		// topBar() {
		// 	let num = 0;
		// 	if (this.tarNums === 2) {
		// 		num = this.topBarHeight + 126;
		// 	} else {
		// 		num = this.topBarHeight + 104;
		// 	}
		// 	return num + 'px';
		// },
		// boxHeight() {
		// 	const numh = this.windowHeight - this.topBarHeight - 104;
		// 	return numh + 'px';
		// }
	},
	// components: { myTabbar, workOne, workTwo, workThree, dropdown },
	onLoad(option) {
		const { url } = option;
		const newUrl = decodeURIComponent(url);
		setTimeout(() => {
			// #ifdef APP-PLUS
			uni.reLaunch({
				url: '/' + newUrl
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/' + newUrl);
			// #endif
		}, 500);
		// const { num } = option;
		// if (num) {
		// 	this.tarNums = num - '';
		// 	this.tabIndex = num - '';
		// 	this.gdType = num - '' + 1;
		// 	this.getList(false, this.gdType);
		// } else {
		// 	this.getList(false, 1);
		// }
	},
	onShow() {
		// uni.pageScrollTo({
		// 	scrollTop: 0,
		// 	duration: 200
		// });
		// this.getNums();
	},
	created() {
		// const that = this;
		// uni.getSystemInfo({
		// 	success(res) {
		// 		that.windowWidth = res.windowWidth;
		// 		that.windowHeight = res.windowHeight;
		// 		that.topBarHeight = res.statusBarHeight;
		// 	}
		// });
		// this.getList(false, 1);
	},
	// // 下拉触底加载
	// onReachBottom() {
	// 	switch (this.gdType) {
	// 		case 1:
	// 			if (this.total - this.contentOne.length > 0) {
	// 				this.currentPage++;
	// 				this.getList(true, this.gdType);
	// 			} else {
	// 				this.downShow = true;
	// 				console.log(this.contentOne.length);
	// 				// return uni.showToast({
	// 				// 	title: '已加载全部',
	// 				// 	icon: 'none'
	// 				// 	// position: 'top'
	// 				// });
	// 			}
	// 			break;
	// 		case 2:
	// 			if (this.total - this.contentTwo.length > 0) {
	// 				this.currentPage++;
	// 				this.getList(true, this.gdType);
	// 			} else {
	// 				this.downShow = true;
	// 				console.log(this.contentTwo.length);
	// 				// return uni.showToast({
	// 				// 	title: '已加载全部',
	// 				// 	icon: 'none'
	// 				// 	// position: 'top'
	// 				// });
	// 			}
	// 			break;
	// 		case 3:
	// 			if (this.total - this.contentThree.length > 0) {
	// 				this.currentPage++;
	// 				this.getList(true, this.gdType);
	// 			} else {
	// 				this.downShow = true;
	// 				console.log(this.contentThree.length);
	// 				// return uni.showToast({
	// 				// 	title: '已加载全部',
	// 				// 	icon: 'none'
	// 				// 	// position: 'top'
	// 				// });
	// 			}
	// 			break;
	// 		default:
	// 			break;
	// 	}
	// },
	// onPullDownRefresh() {
	// 	const that = this;
	// 	setTimeout(function() {
	// 		that.currentPage = 1;
	// 		that.getList(false, that.gdType);
	// 		uni.stopPullDownRefresh();
	// 	}, 1000);
	// },
	methods: {
		// 获取工单数量
		async getNums() {
			const { data: res } = await this.$http(true, 'ywzx/gdjs/selectGongDanShuLiang', '', 'POST');
			this.tabList.forEach((item, index) => {
				item.num = res.data[index + 1];
			});
		},
		// 完成工单搜索
		sbmitSearch(e) {
			console.log(e.target.value);
			this.currentPage = 1;
			this.pageSize = 5;
			this.selectIndex = 0; // 排序清零
			this.getList(false, this.gdType);
			this.pageScrollToBox();
		},
		searchInput(e) {
			// const str = e.target.value;
			// this.searchCneter = str.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '');
			this.searchCneter = e.target.value;
		},
		// 清空搜索框
		closeSearch() {
			this.searchCneter = '';
		},
		// 回滚
		pageScrollToBox() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		selectBusiness(e) {
			this.selectIndex = e;
			this.currentPage = 1;
			this.pageSize = 5;
			this.pageScrollToBox();
			if (this.tarNums === 0) {
				if (e === 0) {
					this.paixuSort = 'DESC';
					this.paixuOrder = 'ID';
					this.getList(false, this.gdType);
				} else if (e === 1) {
					this.paixuSort = 'ASC';
					this.paixuOrder = 'JULI';
					this.getList(false, this.gdType);
				} else if (e === 2) {
					this.paixuSort = 'ASC';
					this.paixuOrder = 'SLSJ';
					this.getList(false, this.gdType);
				}
			} else {
				if (e === 0) {
					this.gdztType = ''; // 全部
					this.getList(false, this.gdType);
				} else if (e === 1) {
					this.gdztType = '2'; // 待确认
					this.getList(false, this.gdType);
				} else if (e === 2) {
					this.gdztType = '4'; // 驳回
					this.getList(false, this.gdType);
				} else if (e === 3) {
					this.gdztType = '5'; // 挂起
					this.getList(false, this.gdType);
				} else if (e === 4) {
					this.gdztType = '6'; // 外派
					this.getList(false, this.gdType);
				}
			}
		},
		changeTab(e) {
			this.pageScrollToBox();
			if (e === 0) {
				this.array = [
					{
						name: '综合排序',
						value: 0
					},
					{
						name: '距离最近',
						value: 1
					},
					{
						name: '时间最久',
						value: 2
					}
				];
			} else if (e === 1) {
				this.array = [
					{
						name: '全部',
						value: 0
					},
					{
						name: '待确认',
						value: 1
					},
					{
						name: '驳回',
						value: 2
					},
					{
						name: '挂起',
						value: 3
					},
					{
						name: '外派',
						value: 4
					}
				];
			}
			this.tarNums = e;
			this.tabIndex = e;
			this.gdType = e + 1; // 工单状态
			this.currentPage = 1; //
			this.pageSize = 5; //
			this.selectIndex = 0; // 排序清零
			this.searchCneter = ''; // 模糊搜索清零
			this.paixuSort = 'DESC'; // 工单排序清零
			this.paixuOrder = 'ID'; // 工单排序条件清零
			this.gdztType = ''; // 工单状态搜索清零
			this.contentOne = [];
			this.contentTwo = [];
			this.contentThree = [];
			this.downShow = false; // 隐藏到底提示
			this.getList(false, this.gdType);
		},
		goback() {
			const pages = getCurrentPages();
			if (pages.length === 1) {
				uni.redirectTo({
					url: '/pages/home/index'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		// goMap() {
		// 	// #ifdef APP-PLUS
		// 	uni.navigateTo({
		// 		url: '/pages/index/goMaps/index'
		// 	});
		// 	// #endif
		// 	// #ifdef H5
		// 	this.$Router.push('/pages/index/goMaps/index');
		// 	// #endif
		// },
		clickOne(e) {
			if (e.type === 1) {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `/pages/index/secondmu/luruchuli?Gdbh=${e.gdbh}&type=${e.num}`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/index/secondmu/luruchuli?Gdbh=${e.gdbh}&type=${e.num}`);
				// #endif
			} else {
				this.getList(false, this.gdType);
			}
			// this.tarNums = e.type;
			// this.tabIndex = e.type;
			// console.log(e);
		},
		clickTwo(e) {
			if (e.type === 1) {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `/pages/index/secondmu/luruchuli?Gdbh=${e.gdbh}&type=${e.num}`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/index/secondmu/luruchuli?Gdbh=${e.gdbh}&type=${e.num}`);
				// #endif
			} else {
				console.log('其他操作');
			}
		},
		clickThree(e) {
			console.log(e);
		},
		async getList(type, app) {
			const jwd = await coordinate();
			const params = {
				order: this.paixuOrder || 'ID',
				sort: this.paixuSort || 'DESC', // DESC倒序， ASC顺序
				M_: this.currentPage,
				N_: this.pageSize,
				JD: jwd.longitude,
				WD: jwd.latitude,
				GDZT: this.gdztType,
				GDZT_APP: app,
				GDBH_SBMC_SBIP_DQCLR: this.searchCneter
			};
			const { data: res } = await this.$http(true, 'ywzx/gdjs/list', params, 'POST');
			const arr = [];
			var distances = '';
			this.getNums();
			if (res.code === '0000') {
				res.data.list.forEach(async item => {
					const wentilx = item.lxmcs ? item.lxmcs + '/' : '';
					// const dz = '';
					// if (item.jd - 0 !== 0 && item.wd - 0 !== 0) {
					// 	distances = await this.distanceNum(item.jd || 0, item.wd || 0);
					// } else {
					// 	distances = '';
					// }
					if (item.juli) {
						if (item.juli > 1000) {
							distances = (item.juli / 1000).toFixed(1) + 'km';
						} else {
							distances = item.juli + 'm';
						}
					} else {
						distances = '';
					}
					const cityList = item.sfmc + item.csmc + item.qxmc + item.xzjdmc;
					const obj = {
						id: item.id,
						ip: item.sbip,
						gdbh: item.gdbh,
						title: item.zcmc,
						dizi: cityList + item.xxdz || '',
						wenti: wentilx + item.gzlbmc,
						xxwenti: item.gzms || '',
						latitude: item.wd || 0,
						longitude: item.jd || 0,
						gdzt: item.gdzt || 0,
						zuobiao: distances
					};
					if (type) {
						switch (app) {
							case 1:
								this.contentOne.push(obj);
								break;
							case 2:
								this.contentTwo.push(obj);
								break;
							case 3:
								this.contentThree.push(obj);
								break;
							default:
								break;
						}
					} else {
						// this.tabList[app - 1].num = res.data.countList;
						arr.push(obj);
					}
				});
				this.total = res.data.countList;
				if (type) {
				} else {
					switch (app) {
						case 1:
							this.contentOne = arr;
							break;
						case 2:
							this.contentTwo = arr;
							break;
						case 3:
							this.contentThree = arr;
							break;
						default:
							break;
					}
				}
			} else {
				this.contentOne = [];
				this.contentTwo = [];
				this.contentThree = [];
				this.total = 0;
			}
		}
		// distanceNum(jd, wd) {
		// 	const that = this;
		// 	return new Promise((resolve, reject) => {
		// 		uni.getLocation({
		// 			// altitude: true,
		// 			type: 'wgs84', //返回可以用于uni.openLocation的经纬度
		// 			geocode: true,
		// 			success: function(res) {
		// 				const latitude = res.latitude;
		// 				const longitude = res.longitude;
		// 				distance(longitude, latitude, jd, wd, val => {
		// 					if (val) {
		// 						resolve(val);
		// 					} else {
		// 						return reject('0m');
		// 					}
		// 				});
		// 			}
		// 		});
		// 	});
		// }
	},
	onHide() {
		// this.tarNums = 0;
		// this.tabIndex = 0;
	}
};
</script>

<style lang="scss" scoped>
.bigBG {
	background-color: #f6f6f6;
	z-index: -10;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #0184fe;
		width: 100%;
	}
}
.dropdownBox {
	// padding: 5px 0;
	box-sizing: border-box;
	height: 20px;
	background-color: #f4f4f4;
}
.dropdownBox2 {
	position: relative;
	padding: 8px 10px 5px 10px;
	height: 38px;
	background-color: #f4f4f4;
	// background-color: pink;
	// display: flex;
	// align-items: center;
	.searchBox {
		border: 1px solid #038bff;
		border-radius: 15px;
		padding: 5px 35px;
		background-color: #ffffff;
	}
	// .quxiao {
	// 	padding: 5px 20px;
	// 	border: 1px solid #038bff;
	// 	color: #FFFFFF;
	// 	border-radius: 15px;
	// 	background-color: #007AFF;
	// }
	.searchIcon {
		position: absolute;
		top: 14px;
		left: 20px;
	}
	.searchClearIcon {
		position: absolute;
		top: 14px;
		right: 20px;
	}
}
.container {
	padding: 10px;
	box-sizing: border-box;
	// background-color: #f6f6f6;
}
.bottomShow {
	position: relative;
	// top: -10px;
	text-align: center;
	// border-radius: 5px;
	color: #bbbbbb;
	background-color: #ffffff;
}
</style>
